<!DOCTYPE html>
<html lang="zh-CN"  xmlns:shiro="http://www.pollix.at/thymeleaf/shiro" xmlns:th="http://www.thymeleaf.org">

	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<title>企业|进销存</title>
		<style type="text/css">


			*{
				margin:0 ;
				padding: 0;
			}
			#header{
				height:50px;
				font-size: 16px;
				
			}
		
			#section{
				height:800px;
				width:100%;
				/*background-color: #ff0000;*/
				/*border-bottom: 3px solid black;*/
			}
			#footer{
				height: 100px;
				/* background-color: red; */
				font-size: 20px;
				padding-top:90px;
				border-top: 3px solid black;
				/*background-color: black;*/
			}
			#footer div{
				text-align: center;

			}
			#header>.navbar {
			 
			  margin-bottom: 0px;
			}
			#navbar-brand{
				padding: 0px 50px;
			}
			#navbar-brand h2{
				margin-top: 5px;
				letter-spacing: 9px;
			}
			
			.nav{
				/* padding: 10px 0px; */
				vertical-align: middle;
			}
			
			
			.glyphicon-cog{
				color: #000000;
			}
			
			.navbar-right li:hover{
				background-color: #3C3C3C;
				
			}
			.glyphicon-user{
				color: #269ABC;
			}
			#section>#sec_left{
				padding: 0px 0px ;
			}
			

			#sec_left ul li{
				margin-top: 0px;
			}
			#sec_left ul li a:hover{
				border-radius: 0;
			}
			#sec_left ul li a{
				border-radius: 0;
			}
			#sec_left ul li a{
				font-size: 15px;
				
			}
			#sec_left ul li a span{
				margin-right: 15px;
			}
			#sec_left ul li ul{
				display: none;
				padding-left: 65px;
				list-style: none;
				
				/* background-color:gray; */
			}
			#sec_left ul li ul li a{
				text-decoration: none;
			}
			#sec_left ul li ul li a:hover{
				color: white;
			}
			.rotate1{
				transform:rotate(90deg);
			}

		</style>
	</head>
	<link rel="shortcut icon" href="/static/images/favicon.ico" type="image/x-icon">
	<link rel="stylesheet" href="/static/bootstrap3/css/bootstrap.css">
	<script src="/static/bootstrap3/jquery-1.8.3.min.js"></script>
	<script src="/static/bootstrap3/js/bootstrap.min.js"></script>
	<script src="/static/js/echarts.min.js"></script>
	<script type="text/javascript">

			
		
	</script>
	<body>
	<div id="error_modal" class="modal fade  bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
		<div class="modal-dialog modal-lg" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<span class="glyphicon glyphicon-exclamation-sign" style="font-size: 25px"></span>
					<h3 class="modal-title text-center" style="display:inline-block;" id="gridSystemModalLabel">注册失败提示</h3>
				</div>
				<div class="modal-body">
					<h4 class="text-danger text-center" id="error_content">....</h4>
				</div>

			</div><!-- /.modal-content -->
		</div><!-- /.modal-dialog -->
	</div><!-- /.modal -->
		<header id="header">
			<div class="container">
				<nav class="navbar navbar-default navbar-fixed-top">
				    <!-- Brand and toggle get grouped for better mobile display -->
				    <div class="navbar-header">
				      <button type="button" class=" navbar-toggle navbar-collapse " data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
				        <span class="sr-only">Toggle navigation</span>
				        <span class="icon-bar"></span>
				        <span class="icon-bar"></span>
				        <span class="icon-bar"></span>
				      </button>
				      <a class="navbar-brand" id="navbar-brand" href="#">
							<h2 class="text-info"><b style="font-size: 36px;">企业进销存</b></h2>
					  </a>
				    </div>
				
				    <!-- Collect the nav links, forms, and other content for toggling -->
				    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
				      <ul class="nav navbar-nav hidden-sm">
				        <li class="active"><a href="#">首页<span class="sr-only">(current)</span></a></li>
				        <li><a class="" href="#">介绍</a></li>
						<li><a class="" href="#">关于我们</a></li>
				      </ul>	
					  <ul class="nav navbar-nav navbar-right" style="padding-right:20px ;">
						  
							<li><a href="#" data-toggle="tooltip" data-placement="bottom" title="备注的标签信息"><span class="glyphicon glyphicon-tags"></span></a></li>
							<li><a href="#" data-toggle="tooltip" data-placement="bottom" title="购买的商品信息"><span class="glyphicon glyphicon-shopping-cart"></span></a></li>
							<li><a href="#"><span class="glyphicon glyphicon-user"></span> username:<b id="b_username" th:text="${user}">admin</b></a></li>
							<li class="dropdown">
							  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-cog"></span></a>
							  <ul class="dropdown-menu" >
								<li><a href="#" id="usersetting">用户设置</a></li>
								
								<li><a href="#">帮助<span class="badge pull-right"><span class="glyphicon glyphicon-zoom-in"></span></span></a></li>
								<li role="separator" class="divider"></li>
								<li><a href="/login/logout">退出登录<span class="glyphicon glyphicon-share pull-right"></span></a></li>
							  </ul>
							</li>
						  </ul>
				    </div>
				
				</nav>
			</div>
		</header>
		<section id="section">
			
			<div id="sec_left" class="col-sm-2 col-lg-2 col-xs-2" style="width: 20%; background-color:black; height: 100%;">		
				<ul class="nav nav-pills nav-stacked">
				  <li role="presentation" class="active">
					 
					  <a id="index_jumbotron" href="#">
						  <span class="glyphicon glyphicon-flag" aria-hidden="true"></span>
						  首页
						</a>
				  </li>

				  <li role="presentation">
					  <a href="#">
						  <span class="glyphicon glyphicon-send" aria-hidden="true"></span>
						  商品管理
						  <span class="glyphicon glyphicon-chevron-right pull-right"></span>
					  </a>
					 <ul>
						 <li><a href="#" id="b_manager">商品销售信息管理</a></li>
						 <li><a href="#" id=""b_tuihuo>商品退货</a> </li>
						 <li><a href="#" id="b_sell">商品销售排行</a> </li>
					 </ul>
					</li>
					
				  <li role="presentation">
					  <a href="#">
						  <span class="glyphicon glyphicon-print" aria-hidden="true"></span>
						  客户信息管理
						  <span class="glyphicon glyphicon-chevron-right pull-right"></span>
						  <ul>
							  <li><a href="#" id="client">客户信息管理</a></li>
						  </ul>
					  </a>
					  
				  </li>
				  <li role="presentation"><a href="#"><span class="glyphicon glyphicon-compressed" aria-hidden="true"></span>库存管理<span class="glyphicon glyphicon-chevron-right pull-right"></span></a>
					  <ul>
						 <li><a href="#">库存商品基本管理</a></li>
						 <li><a id="r_resposity" href="#">库存统计</a></li>
						  <li><a href="#">库存流动管理</a> </li>
					  </ul>
				  </li>
				  <li shiro:hasRole="admin" role="presentation"><a href="#"><span class="glyphicon glyphicon-align-center" aria-hidden="true"></span>系统管理<span class="glyphicon glyphicon-chevron-right pull-right"></span></a>
						<ul>
							 <li><a href="#" id="systemsetting">操作员管理</a></li>
						</ul>
				  </li>
				</ul>
			</div>
			<div id="sec_right" class="col-sm-10 col-lg-10 col-xs-10" style="width: 80%;  height: 100%; padding: 0;">
				<!--<div class="jumbotron" style="width: 100%; height: 100%; background-image: url(/static/login_img/154639-154848879982ac.jpg);">
					<h1>欢迎来到企业进销存</h1>
					<p>welcome to company</p>
					<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
				</div>-->
			</div>
		</section>
		<footer id="footer">
			<div class="container">
				<div class="col-lg-3 col-sm-3">艰苦奋斗</div>
				<div class="col-lg-3 col-sm-3">自强不息</div>
				<div class="col-lg-3 col-sm-3">积极进取</div>
				<div class="col-lg-3 col-sm-3">共创佳绩</div>
			</div>
		</footer>
	
	</body>
	<script type="text/javascript">
		$(function () {
			$("#sec_right").load("/index_jumbotron");
			loadUI("b_sell","/goods");
			loadUI("index_jumbotron","/index_jumbotron");
			loadUI("r_resposity","/resposity");
			loadUI("systemsetting","/systemsetting");
			loadUI("client","/client");
			loadUI("usersetting","/usersetting");
		})
		function loadUI(id,ui){
			$("#"+id).click(function () {
				$("#sec_right").empty();
				$("#sec_right").load(ui);
			})
		}
			$(".navbar-right li").mouseover(function(){
				$(this).children().css("color","white");
				$(".navbar-right li ul li a").css("color","black");
				$(this).children().children().filter(".glyphicon-cog").css("color","black");
				$(this).children().children().filter(".glyphicon-shopping-cart").css("color","white");
				// $(this).children().children().filter(".glyphicon-user").css("color","golder");
				$(this).children().children().filter(".glyphicon-tags").css("color","white");

			})
			$(".navbar-right li").mouseout(function(){
				$(".glyphicon-cog").css("color","black");
				$(".glyphicon-shopping-cart").css("color","#777");
				$(".glyphicon-user").css("color","#269ABC");
				$(".glyphicon-tags").css("color","#777");
				$(this).children().css("color","#777")
			})
		$("#sec_left>ul>li a").find("span:eq(1)").parent().click(function(){

			
			// $(this).parent().css("background-color","black");
				
				
				if($(this).find("span:eq(1)").hasClass("rotate1")){
					$(this).find("span:eq(1)").removeClass("rotate1");
					$(this).parents("li").find("ul").slideUp();
					// $(this).parents("li").siblings().find("ul").slideDown();
					
					// $(this).parent().find("ul").slideUp();
				}else{
					$(this).find("span:eq(1)").addClass("rotate1");
					$(this).parent().siblings().find("a span:eq(1)").removeClass("rotate1");
					$(this).parents("li").siblings().find("ul").slideUp();
					$(this).parents("li").find("ul").slideDown();
				}
				
			
		})
		
		// $("#footer").css("height",($(window).height()-850)+"px");
		console.log($(window).height());

	</script>
</html>
